<!DOCTYPE html>

<html>

<head>
    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>后台管理</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/mystyle.css">
    <!-- 引入组件库 -->

    <script src="../js/vue.js"></script>

    <script src="../plugins/elementui/index.js"></script>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script src="../js/axios-0.18.0.js"></script>

    <script src="../http/request.js"></script>


</head>

<body class="hold-transition">
    <div id="app">
        <div class="app-container">
            <div class="box">

                <div class="filter-container">

                    <el-input placeholder="订单号" v-model="pagination.queryString"
                        style="width: 200px; margin-right: 20px;" class="filter-item"></el-input>

                    <el-input placeholder="接单手机号" v-model="pagination.phone" style="width: 200px; margin-right: 20px;"
                        class="filter-item"></el-input>

                    <el-input placeholder="发单手机号" v-model="pagination.outPhone"
                        style="width: 200px; margin-right: 20px;" class="filter-item"></el-input>

                    <el-button type="primary" @click="getByNumber()" class="dalfBut">查询</el-button>

                </div>

                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                    <el-table-column prop="id" type="index" align="center" label="序号"></el-table-column>

                    <el-table-column prop="number" label="订单号" align="center"></el-table-column>

                    <el-table-column prop="outPhone" label="发单手机号" align="center"></el-table-column>

                    <el-table-column prop="phone" label="接单手机号" align="center"></el-table-column>

                    <el-table-column prop="productId" label="订单类型" align="center"></el-table-column>

                    <el-table-column prop="amount" label="悬赏金额" align="center"></el-table-column>

                    <!-- 跑跑币-->
                    <el-table-column prop="orderStatus" label="订单状态" align="center"></el-table-column>

                    <el-table-column label="操作" align="center">

                        <template slot-scope="scope">

                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">查看</el-button>


                            <el-button type="success" size="mini" @click="update(scope.row)">编辑</el-button>

                            <el-button type="success" size="mini" @click="cancel(scope.row)">退款</el-button>
                        </template>

                    </el-table-column>



                </el-table>

                <!-- 编辑标签弹层 -->

                <div class="add-form">

                    <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

                        <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                            label-width="100px">

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="发单手机号" prop="phone">
                                        <el-input v-model="formData.phone" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="订单状态">
                                        <el-input v-model="formData.orderStatus" type="address"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="送达地址">
                                        <el-input v-model="formData.address" type="address"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="期望送达">
                                        <el-input v-model="formData.expectTime" type="address"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col>
                                    <span style="color: red;">
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用说明：改为0，取消订单</span>
                                    <br />
                                    <span style="color: red;">
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;改为1，待接单状态</span>
                                </el-col>
                            </el-row>

                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                            <el-button type="primary" @click="handleEdit()">确定</el-button>
                        </div>

                    </el-dialog>

                </div>

            </div>

        </div>

    </div>

</body>



<script>
    var vue = new Vue({

        el: '#app',
        data: {
            pagination: {},
            dataList: [],//当前页要展示的列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//控制表单是否可见
            dialogFormVisible4Edit: false,//编辑表单是否可见
            rules: {//校验规则
                type: [{ required: true, message: '帮手类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '帮手电话号为必填项', trigger: 'blur' }]
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        mounted() {
            this.getAll();
        },
        methods: {
            //列表
            getAll() {
                //发送ajax请求
                axios.get("/order/getAll").then((res) => {
                    console.log(res.data)
                    this.dataList = res.data;
                    // console.log("dataList" + JSON.stringify(this.dataList))
                });
            },
            //根据手机号查询

            handleSizeChange: function (val) {
                alert("每页记录数变化" + val)
            },
            handleCurrentChange: function (val) {
                alert("页码发生变化" + val)
            },
            getByNumber() {
                let queryString = this.pagination.queryString
                let phone = this.pagination.phone
                let outPhone = this.pagination.outPhone

                console.log(this.pagination.queryString)
                console.log(this.pagination.phone)
                if (typeof (queryString) == 'undefined') {
                    queryString = null
                }
                if (typeof (phone) == 'undefined') {
                    phone = null
                }
                if (typeof (outPhone) == 'undefined') {
                    outPhone = null
                }
                //发送ajax请求
                axios.get("/order/getByNumber?number=" + queryString + "&phone=" + phone + "&outPhone=" + outPhone).then((res) => {
                    console.log(this.pagination.queryString)
                    console.log(this.pagination.phone)
                    console.log(res)
                    this.dataList = res.data;
                });
            },
            update(row) {
                // console.log(row);   //row.id 查询条件
                //查询数据，根据id查询
                axios.get("/order/getAllInfo?" + "id=" + row.id).then((res) => {
                    // console.log("formdata" + JSON.stringify(this.formData))
                    // console.log(res.data.data);
                    // console.log(res.data)
                    if (res.code === 1) {
                        console.log(res)
                        //展示弹层，加载数据
                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data;
                        this.formData.id = row.id
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
            cancel(row) {
                this.$confirm("此操作将当前订单金额退回，是否继续？", "提示", {
                    type: 'info'
                }).then(() => {
                    axios.put(`/order/cancel/${row.id}`).then((res) => {
                        if (res.code === 1) {
                            this.$message.success('退款成功');
                        } else {
                            this.$message.error('服务器异常')
                        }
                    })
                })

            },
            //弹出编辑窗口
            handleUpdate(row) {
                window.location.href = '../page/orderdetail.html?id=' + row.id
            },
            // 删除
            handleDelete(row) {
                //1.弹出提示框
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
                    type: 'info'
                }).then(() => {
                    //2.做删除业务
                    axios.delete("/admin/delete/" + row.id).then((res) => {
                        console.log(res)
                        if (res.code === 1) {
                            this.$message.success("删除成功");
                        } else {
                            this.$message.error("删除失败");
                        }
                    }).finally(() => {
                        this.getAll();
                    });
                }).catch(() => {
                    //3.取消删除
                    this.$message.info("取消删除操作");
                });
            },
            //编辑
            handleEdit() {
                //发送ajax请求
                axios.put("/order/updateEditInfo", this.formData).then((res) => {
                    console.log(this.formData)
                    //如果操作成功，关闭弹层，显示数据
                    if (res.code === 1) {
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    } else if (res.code === 0) {
                        this.$message.error(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                }).finally(() => {
                    this.getAll();
                });
            },
        },
    })

</script>

</html>